﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Areas/CustomerAdmin/Customer.Master" CodeBehind="Details.aspx.cs" Inherits="OnlineBusinesses.Areas.CustomerAdmin.Charts.Details" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="ContentCustomerAdmin">
    <script type="text/javascript">
        $(document).ready(function () {
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 50; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["danhsach"] = productNames[productindex];
                row["nhom"] = productNames[productindex];
                row["emailgui"] = productNames[productindex];
                row["startday"] = price;
                row["endday"] = quantity;
                row["ketqua"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'danhsach', type: 'string' },
                    { name: 'nhom', type: 'string' },
                    { name: 'emailgui', type: 'string' },
                    { name: 'startday', type: 'number' },
                    { name: 'endday', type: 'number' },
                    { name: 'ketqua', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create jqxgrid.
            $("#grid").jqxGrid(
            {
                source: dataAdapter,
                width: $("#jqxWidget").width(),
                pageable: true,
                autorowheight: true,
                autoheight: true,
                altrows: true,
                columns: [
                  { text: 'Danh sách nội dung', datafield: 'danhsach' },
                  { text: 'Nhóm email', datafield: 'nhom', cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Email gửi', datafield: 'emailgui' },
                  { text: 'Thời gian bắt đầu', datafield: 'startday'},
                  { text: 'Thời gian kết thúc', datafield: 'endday' },
                  { text: 'Kết quả', datafield: 'ketqua' },
                { text: 'Xóa', width: 100 }
                ]
            });

            $("#jqxfromdate").jqxDateTimeInput({ width: '120px', height: '32px' });
            $("#jqxtodate").jqxDateTimeInput({ width: '120px', height: '32px' });

        });

    </script>    
    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:10px;min-height:650px;">
        <h3>Danh sách nội dung gửi</h3>
        <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" id="jqxWidget" style="padding:5px;">
            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:20px;border:1px solid #ddd;">
                <div class="col-md-2 col-lg-2 col-xs-4 col-sm-4" style="padding:0px;line-height:32px;text-align:left;">Từ ngày</div>
                <div class="col-md-2 col-lg-2 col-xs-8 col-sm-8" style="padding:0px;"><div id="jqxfromdate"></div></div>
                <div class="col-md-2 col-lg-2 col-xs-4 col-sm-4" style="padding:0px;line-height:32px;text-align:center;">Đến ngày</div>
                <div class="col-md-2 col-lg-2 col-xs-8 col-sm-8" style="padding:0px;"><div id="jqxtodate"></div></div>
                <div class="col-md-2 col-lg-2 col-xs-6 col-sm-6" style="padding:0px 5px;">
                    <span class="btn btn-default" style="border-radius:0px;width:100%;"><span class="fa fa-search" style="margin-right:6px;"></span>Lọc dữ liệu</span>
                </div>
                <div class="col-md-2 col-lg-2 col-xs-6 col-sm-6" style="padding:0px 5px;">
                    <span class="btn btn-default" style="border-radius:0px;width:100%;">
                        <span class="fa fa-mail-forward" style="margin-right:6px;"></span>Xuất dữ liệu
                    </span>
                </div>
            </div>
            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px;margin:10px 0px;height:1px;background:#ddd;"></div>
            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" id="grid">
            </div>
        </div>
    </div>
</asp:Content>